<template>
  <div class="kui-content-wrap">
    <div class="kui-wrap-desk kui-flex kui-flex-between kui-flex-middle">
      <Breadcrumb class="kui-desk-nav">
        <BreadcrumbItem to="/">我的工作台</BreadcrumbItem>
        <BreadcrumbItem to="/staff">员工管理</BreadcrumbItem>
        <BreadcrumbItem>员工详情</BreadcrumbItem>
      </Breadcrumb>
    </div>
    <div class="kui-wrap-body">
      <div class="kui-body-section">
        <div class="kui-section-item">
          <div class="kui-item-hd">
            <div class="kui-hd-title">员工基本信息</div>
          </div>
          <div class="kui-item-bd device-management-box">
            <Form class="kui-form-panel" ref="formData" :model="temporaryData" :label-width="90" label-position="left">
              <FormItem label="登录账号：">
                <Input v-model="temporaryData.account" style="width:294px" placeholder="请输入"/>
              </FormItem>
              <FormItem label="登录密码：">
                <Input v-model="essentialInfor.password" style="width:294px" placeholder="请输入"/>
              </FormItem>
              <FormItem label="员工名字：">
                <Input v-model="temporaryData.name" style="width:294px" placeholder="请输入，例如：2M*2M"/>
              </FormItem>
              <FormItem label="联系电话：">
                <Input v-model="temporaryData.phone" style="width:294px" placeholder="请输入"/>
              </FormItem>
              <FormItem label="员工职位：">
                <Input v-model="temporaryData.job" style="width:294px" placeholder="请输入"/>
              </FormItem>
              <FormItem label="角色标识：">
                <Select v-model="temporaryData.rid" style="width:294px" placeholder="请选择">
                    <Option :value="1">超级管理员</Option>
                    <Option :value="2">普通员工</Option>
                </Select>
              </FormItem>
              <FormItem label="状态标识：">
                <Select v-model="temporaryData.state" style="width:294px" placeholder="请选择">
                    <Option :value="1">正常</Option>
                    <Option :value="-1">锁定</Option>
                </Select>
              </FormItem>
              <FormItem label="短信提醒：">
                <Select v-model="temporaryData.is_phone" style="width:294px" placeholder="请选择">
                    <Option :value="1">提醒</Option>
                    <Option :value="2">不提醒</Option>
                </Select>
              </FormItem>
              <FormItem>
                <Button type="primary" @click="clickPut()">提交修改</Button>
              </FormItem>
            </Form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
 export default {
   data () {
     return {
      essentialInfor: {},
      temporaryData: {} //修改数据临时存放
     }
   },
   methods: {
     //获取数据
    async getData(id) {
      const app = this
      let { data } = await app.$axios.get(`/master/v1/user/${id}`)
      if( data.code === 100 ) {
        app.essentialInfor = data.result
        app.temporaryData = {
          is_phone: app.essentialInfor.is_phone,
          account: app.essentialInfor.account,
          password: app.essentialInfor.password,
          name: app.essentialInfor.name,
          phone: app.essentialInfor.phone,
          job: app.essentialInfor.job,
          rid: app.essentialInfor.rid,
          state: app.essentialInfor.state
        }
      }
    },
        //修改数据
    async putData() {
      const app = this
      let { data } = await app.$axios.put(`/master/v1/user/${app.$route.query.id}`, app.temporaryData)
      if(data.code === 100){
        app.$router.push('/staff')
        app.$Message.success(data.msg)
      }else{
        app.$Message.error(data.msg)
      }
    },
    //修改弹窗
    clickPut () {
      const app = this
      app.$Modal.confirm({
        title: '确认修改',
        content: '你正在修改，是否继续？',
        onOk: () => {
          app.putData()
        },
        onCancel: () => {
          app.getData(app.$route.query.id)
        }
      })
    },
   },
   created () {
     this.getData(this.$route.query.id)
   }
 }
</script>

<style lang="less" scoped>
@range: 24px;
.kui-section-item {
  &+.kui-section-item {
    margin-top: @range !important;
  }
}
.device-management-box {
  .ivu-row {
    .ivu-col {
      font-size: 14px !important;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      line-height: 2.4;
    }
  }
}
</style>
